<template>
    <div>
        <h2 style="text-align: center;">用户借款列表</h2>
        借款名称: <input type="text" placeholder="请输入借款名称" v-model="WhereInfo.Bname">
        利息:
        <select v-model="WhereInfo.BIid">
            <option value="0">--请选择--</option>
            <option v-for="item in selInfo" :key="item.BI_Id" :value="item.BI_Id">{{ item.BI_Interest }}%</option>
        </select>
        <input type="button" value="查询" @click="LoadData">
        <input type="button" value="正序" @click="LoadData">
        <input type="button" value="倒序" @click="SaveDesc">
        <table border="1">
            <thead>
                <tr>
                    <td>借款编号</td>
                    <td>借款名称</td>
                    <td>借款最高金额</td>
                    <td>借款年限</td>
                    <td>利息</td>
                    <td>借款简介</td>
                    <td>借款发布时间</td>
                    <td>用户名称</td>
                    <td>借款金额</td>
                    <td>操作</td>
                </tr>
            </thead>
    
            <tbody>
                <tr v-for="item in info" :key="item.B_Id">
                    <td>{{ item.B_Id }}</td>
                    <td>{{ item.B_Name }}</td>
                    <td>{{ item.B_MaxMoney }}CNY</td>
                    <td>{{ item.B_Year }}年</td>
                    <td>{{ item.BI_Interest }}%</td>
                    <td>{{ item.B_Remark }}</td>
                    <td>{{ item.B_CreateDate.substring(0,10) }}</td>
                    <td>{{ item.UL_Name }}</td>
                    <td>{{ item.UB_Money }}</td>
                    <td>
                        <slot :id="item.B_Id"></slot>
                    </td>
                </tr>
            </tbody>
        </table>
    
        <span>
            总共{{ PageInfo.totalCount }}条数据,每页显示{{ PageInfo.PageSize }}条,当前第{{ PageInfo.PageIndex }}/{{ PageInfo.PageCount }}页&nbsp;
    
            <a href="#" @click="PageSet('F')">首页</a>&nbsp;
            <a href="#" @click="PageSet('U')">上一页</a>&nbsp;
            <a href="#" @click="PageSet('N')">下一页</a>&nbsp;
            <a href="#" @click="PageSet('E')">尾页</a>&nbsp;
        </span>
    </div>
</template>
    
<script setup lang="ts">
    import {ref,onMounted} from'vue';
    import axios from 'axios';
    import {useUserStore} from '../../store/index.ts'

    //创建仓库实例
    const useStore=useUserStore();
    
    //创建响应式数据
    const info=ref([{
        B_Id:0,
        B_Name:"",
        B_MaxMoney:0,
        B_Year:0,
        B_Remark:"",
        B_CreateDate:"",
        BI_Id:0,
        BI_Interest:0,
        UB_Money:0,
        UL_Name:""
    }])
    
    //创建响应式数据用于绑定下拉
    const selInfo=ref([{
        BI_Id:0,
        BI_Interest:0
    }])
    
    
    //创建响应式数据 用于查询
    const WhereInfo=ref({
        Bname:"",
        BIid:0
    })
    
    //创建响应式数据用于分页
    const PageInfo=ref({
        PageIndex:1,//当前页
        PageSize:2,//每页显示
        totalCount:0,//总条数
        PageCount:0//总页数
    })
    
    //创建生命周期函数钩
    onMounted(()=>{
        GetSelect()
        LoadData()
    })
    
    //完成下拉框数据加载
    const GetSelect=()=>{
        axios.get("https://localhost:44309/api/Borrows/ShowInterest")
        .then(res=>{
            selInfo.value=res.data
        })
        .catch(error=>{
            console.log(error);
        })
    }
    
    //完成数据加载
    const LoadData=()=>{
        axios.get("https://localhost:44309/api/Borrows/ShowUserBorrowMoney",
            {
                params:{
                    Uid:useStore.Uid,
                    Bname:WhereInfo.value.Bname,
                    BIid:WhereInfo.value.BIid,
                    PageIndex:PageInfo.value.PageIndex,
                    PageSize:PageInfo.value.PageSize
                }
            }
        )
        .then(res=>{
            info.value=res.data.Plist
    
            //总条数
            PageInfo.value.totalCount=res.data.totalCount;
            //总页数
            PageInfo.value.PageCount=res.data.PageCount;
        })
        .catch(error=>{
            console.log(error);
        })
    }

    //完成数据加载
    const SaveDesc=()=>{
        axios.get("https://localhost:44309/api/Borrows/ShowUserDescBorrowMoney",
            {
                params:{
                    Uid:useStore.Uid,
                    Bname:WhereInfo.value.Bname,
                    BIid:WhereInfo.value.BIid,
                    PageIndex:PageInfo.value.PageIndex,
                    PageSize:PageInfo.value.PageSize
                }
            }
        )
        .then(res=>{
            info.value=res.data.Plist
    
            //总条数
            PageInfo.value.totalCount=res.data.totalCount;
            //总页数
            PageInfo.value.PageCount=res.data.PageCount;
        })
        .catch(error=>{
            console.log(error);
        })
        LoadData()
    }
    
    //完成分页
    const PageSet=(val:string)=>{
        switch(val)
        {
            case 'F':
                //首页 当前页=1
                PageInfo.value.PageIndex=1;
            break;
    
            case 'U':
                //上一页 当前页-1
                if(PageInfo.value.PageIndex>1)
                {
                    PageInfo.value.PageIndex--;
                }
                else
                {
                    alert('当前已经是首页');
                    return;
                }
                
            break;
    
            case 'N':
                ///下一页 当前页+1
                if(PageInfo.value.PageIndex<PageInfo.value.PageCount)
                {
                    PageInfo.value.PageIndex++;
                }
                else
                {
                    alert('当前已经是尾页');
                    return;
                }
            break;
    
            case 'E':
                //尾页 当前页=最大页数
                PageInfo.value.PageIndex=PageInfo.value.PageCount;
            break;
        }
        LoadData();
    }
</script>
    